<template>
  <div class="find">
    <!-- <navBar></navBar> -->
    <!-- tab分类栏 -->
    <div class="nav-tab">
      <van-tabs
        swipeable
        v-model="nameActive"
        line-height="0px"
        @click="tabClick"
      >
        <van-tab :name="0">
          <template #title>
            <div class="nav-tab-list" :class="{ active: 0 === nameActive }">
              热门
            </div>
          </template>
        </van-tab>
        <van-tab v-for="(item, index) in detail" :key="index" :name="item.id">
          <template #title>
            <div
              class="nav-tab-list"
              :class="{ active: currentIndex === item.id }"
            >
              {{ item.name }}
            </div>
          </template>
        </van-tab>
      </van-tabs>
    </div>
    <!-- 下拉刷新 -->
    <van-pull-refresh
      v-model="isLoading"
      success-text="刷新成功"
      @refresh="onRefresh"
    >
      <div>
        <div class="content-box">
          <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
          >
            <!-- 轮播图 -->
            <div class="carousel" v-if="nameActive === 0">
              <van-swipe :autoplay="3000">
                <van-swipe-item
                  v-for="(item, index) in bannerList"
                  :key="index"
                  indicator-color="#39a9ed"
                  height="100%"
                >
                  <img :src="item.image" alt="" />
                </van-swipe-item>
              </van-swipe>
            </div>
            <!-- 主要资讯 -->
            <!-- 上拉加载 -->
            <div class="list">
              <div
                class="real-time-info"
                v-for="(item, index) in homeLists"
                :key="index"
                @click="toHeadlineDetails(item.contentId, item.contentColumnId)"
              >
                <div class="left">
                  <h4 class="title">
                    {{ item.title }}
                  </h4>
                  <div class="info">
                    <div class="info-left">
                      <i class="iconfont">&#xe610;</i>&nbsp;&nbsp;{{
                        item.contentColumn
                      }}
                    </div>
                    <div class="type">{{ item.readCount }}人浏览</div>
                  </div>
                </div>
                <div class="right">
                  <img class="img" :src="item.image" alt="" />
                </div>
              </div>
            </div>
          </van-list>
        </div>
      </div>
    </van-pull-refresh>
  </div>
</template>

<script>
import { homeDetails, homeList } from '@/api/find.js'
// import navBar from '@/components/navBar'
export default {
  name: 'find',
  // components: {
  //   navBar
  // },
  data () {
    return {
      currentIndex: 0,
      bannerList: [], // 轮播图
      detail: [], // tab栏
      homeLists: [], // 首页列表
      listVo: {}, // 比赛信息
      // 首页列表数据
      current: 1,
      nameActive: 0, // 默认选中的导航
      pageSize: 8,
      query: {}, // tab栏
      isLoading: false, // 下拉刷新
      loading: false, // 上拉加载
      finished: false
    }
  },
  async created () {
    // tab栏
    const res = await homeDetails(this.query)
    this.detail = res.data.data.contentColumnList
    this.bannerList = res.data.data.bannerList
    this.homeListsClick()
  },
  methods: {
    // 接口请求封装
    async homeListsClick (id) {
      const data = id === undefined ? {} : { contentColumnId: id }
      const res1 = await homeList({
        pageNum: (this.current - 1) * this.pageSize,
        pageSize: this.pageSize,
        query: data
      })
      console.log('toutiao', res1)
      this.homeLists = res1.data.data.records
    },
    tabClick () {
      this.currentIndex = this.nameActive
      if (this.nameActive === 0) {
        this.homeListsClick()
      } else {
        this.homeListsClick(this.nameActive)
      }
    },
    // 下拉刷新
    async onRefresh () {
      const res1 = await homeList({
        pageNum: (this.current - 1) * this.pageSize,
        pageSize: this.pageSize,
        query: {}
      })
      this.homeLists = res1.data.data.records
      this.isLoading = false
    },
    // 上拉加载
    async onLoad () {
      const res1 = await homeList({
        pageNum: (this.current - 1) * this.pageSize,
        pageSize: this.pageSize,
        query: {}
      })
      this.homeLists.push(...res1.data.data.records)
      this.loading = false
      this.current++
      if (this.homeLists.length >= res1.data.data.total) {
        this.finished = true
      }
    },
    // 详情
    toHeadlineDetails (contentId, contentColumnId) {
      this.$router.push({
        path: '/home/headline',
        query: {
          id: contentId,
          columnld: contentColumnId
        }
      })
    }
  }
}
</script>

<style lang="less">
.find {
  height: 100%;
  .nav-bar {
    .img {
      width: 68px;
      height: 24px;
    }
    .icon {
      color: #505050;
      font-weight: 600;
    }
  }
  .nav-tab {
    .van-tab {
      color: #000;
      .nav-tab-list {
        width: 56px;
        height: 28px;
        line-height: 28px;
        text-align: center;
      }
    }
  }
  .content-box {
    padding: 0 15px;
    .carousel {
      background-color: #f7f8fa;
      height: 174px;
      .van-swipe {
        height: 154px;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
    .list {
      padding-bottom: 150px;
      .real-time-info {
        display: flex;
        padding: 15px 0;
        border-bottom: 1px solid #f7f7f7;
        .left {
          flex: 1;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          padding-right: 15px;
          .title {
            font-weight: 600;
            font-size: 15px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2; // 控制多行的行数
            -webkit-box-orient: vertical;
          }
          .info {
            display: flex;
            justify-content: space-between;
            font-size: 14px;
            align-items: center;

            .info-left {
              padding: 3px 12px;
              background-color: #ffefef;
              border-radius: 9px;
              color: #e09494;
              font-size: 14px;
              .iconfont {
                font-weight: 500;
              }
            }
            .type {
              color: #97a8a7;
            }
          }
        }
        .right {
          width: 120px;
          height: 75px;
          .img {
            border-radius: 5px;
            width: 100%;
            height: 100%;
          }
        }
      }
      .video {
        padding-top: 15px;
        .left {
          .title {
            font-weight: 600;
            font-size: 16px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2; // 控制多行的行数
            -webkit-box-orient: vertical;
            margin-bottom: 15px;
          }
          .v-box {
            width: 100%;
            height: 193px;
            position: relative;
            .cover {
              border-radius: 5px;

              width: 100%;
              height: 100%;
            }
            .iconfont {
              position: absolute;
              left: 50%;
              top: 50%;
              transform: translate(-50%, -50%);
              font-size: 30px;
              background-color: rgba(0, 0, 0, 0.6);
              padding: 4px 6px;
              border-radius: 50%;
              font-size: 30px;
              color: #fff;
            }
            .duration {
              position: absolute;
              right: 20px;
              bottom: 10px;
              background-color: rgba(0, 0, 0, 0.6);
              color: #f7f7f7;
              font-size: 14px;
              padding: 1px 8px;
              border-radius: 8px;
            }
          }
        }
        .info {
          margin-top: 15px;
          display: flex;
          justify-content: space-between;
          font-size: 14px;
          align-items: center;

          .info-left {
            padding: 3px 12px;
            background-color: #ffefef;
            border-radius: 9px;
            color: #e09494;
            font-size: 14px;
            .iconfont {
              font-weight: 500;
            }
          }
          .type {
            color: #97a8a7;
          }
        }
      }
    }
  }
  .active {
    width: 56px;
    height: 28px;
    line-height: 28px;
    border-radius: 15px;
    background-color: #0085ff;
    color: #fff;
    text-align: center;
  }
}
</style>
